<template>
  <div class="form-content">
    <van-form @submit="onSubmit" @failed="failed">
      <van-field name="sex" :rules="[{ required: true }]">
        <template #input>
          <div class="item">
            <van-radio-group v-model="sex" direction="horizontal">
              <van-radio checked-color="#07c160" name="1">男</van-radio>
              <van-radio checked-color="#07c160" name="2">女</van-radio>
            </van-radio-group>
          </div>
        </template>
      </van-field>
      <!--      姓名字段-->
      <div class="input">
        <label>姓名</label>
        <van-field
          v-model="username"
          name="name"
          placeholder="请填写姓名"
          :rules="[{ required: true }]"
        />
      </div>
      <!--      出生年月-->
      <div class="input">
        <label>出生年月</label>
        <van-field
          v-model="date"
          name="birth_date"
          placeholder="请填写出生年月"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_date_model = !show_date_model"
        />
        <van-popup v-model="show_date_model" round position="bottom" :style="{ height: '40%' }">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择出生年月日"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="dateConfirm"
          />
        </van-popup>
      </div>
      <!--      工作经验-->
      <div class="input">
        <label>工作经验</label>
        <!--        <van-cell is-link @click="show = !show">展示弹出层</van-cell>-->
        <van-field
          v-model="work_experience"
          name="work_experience"
          placeholder="请填工作经验"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_work_experience_model = !show_work_experience_model"
        />
        <van-popup v-model="show_work_experience_model" round position="bottom" :style="{ height: '40%' }">
          <van-picker
            title="工作经验"
            show-toolbar
            :columns="work_experience_columns"
            @confirm="work_experience_onConfirm"
            @cancel="work_experience_onCancel"
            @change="work_experience_onChange"
          />
        </van-popup>
      </div>
      <div class="input job_status" style="border: none">
        <label>求职状态</label>
        <van-field name="job_status" :rules="[{ required: true }]">
          <template #input>
            <div class="item">
              <van-radio-group class="job_status_group" v-model="job_status" direction="horizontal">
                <van-radio checked-color="#07c160" class="job_status_item" name="1">离职-随时到岗</van-radio>
                <van-radio checked-color="#07c160" class="job_status_item" name="2">在职-月内到岗</van-radio>
                <van-radio checked-color="#07c160" class="job_status_item" name="3">在职-考虑机会</van-radio>
                <van-radio checked-color="#07c160" class="job_status_item" name="4">在职-暂不考虑</van-radio>
              </van-radio-group>
            </div>
          </template>
        </van-field>
      </div>
      <van-button native-type="submit" round type="default" style="width: 100%; margin-top: 30px;" :class="{'btn_active': btn_active}">下一步</van-button>
    </van-form>

  </div>
</template>

<script>

export default {
  name: 'form-content',
  data () {
    return {
      username: '',
      sex: '',
      date: '',
      work_experience: '',
      job_status: '',
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2020, 10, 1),
      currentDate: new Date(),
      show_date_model: false,
      show_work_experience_model: false,
      work_experience_columns: ['应届毕业生', '一年以上', '两年以上', '三年以上'],
      default_btn: false,
      btn_active: true
    }
  },
  props: {
    profile: Array
  },
  mounted () {
    // this.$store.state.active++
  },
  methods: {
    onSubmit (obj) {
      if (this.profile[0]) {
        obj.profile = this.profile[0].content
      }
      this.$router.push('/page2')
      this.$store.state.active++
      this.$store.dispatch('userInfo', obj)
    },
    failed (e) {
      this.$Notify({type: 'warning', message: '请填写完整的信息'});
    },
    dateConfirm (t) {
      // 转换成时间戳格式
      const time = this.$moment(t).valueOf()
      // 时间戳转换成其它格式
      this.date = this.$moment(time).format('YYYY-MM-DD')
      this.show_date_model = false
    },
    work_experience_onConfirm (value) {
      this.work_experience = value
      this.show_work_experience_model = false
    },
    work_experience_onCancel () {

    },
    work_experience_onChange () {

    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }
      return val;
    }
  }
}
</script>

<style lang="scss" scoped>

.form-content {

  .item {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .input {
    border-bottom: 0.5px dashed #cccccc;
    margin-top: 8px;

    label {
      color: #353535;
      font-size: 14px;
      padding-left: 16px;

      &::after {
        content: '*';
        color: red;
      }
    }

    &.job_status {
      .job_status_group {
        display: flex;
        justify-content: flex-start;

        .job_status_item {
          padding: 8px 0;
        }
      }
    }
  }

  .default_btn {
    background-color: #cccccc;
  }

  .btn_active {
    background-color: #59c262;
    color: #ffffff;
  }
}
</style>
